<template>
	<div class="box">
		<div
			v-if="state.data.length > 0"
			class="item d-flex"
			v-for="(item, index) in state.data"
		>
			<div class="index fontStyle">{{ index + 1 }}</div>
			<div class="name d-flex j-start m-l10"><span>{{ item.projectName }}</span></div>
			<div class="id">{{ item.unExecuteAmount }}</div>
			<div class="zb">{{ item.deviationRatio }}%</div>
		</div>
		<el-empty class="empty" v-else description="暂无数据" />
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElRow, ElCol, ElEmpty } from "element-plus";
import { cockpitApi } from "@/api/investment";

const route = useRoute();
const router = useRouter();

const props = defineProps({
	year: {
		type: String,
		default: () => {
			let date = new Date(); // 获取时间
			return date.getFullYear(); // 获取年
		},
	},
});

const state = reactive({
	data: [],
});

const handel = () => {};

/**
 * 固投偏差Top10
 */
const getInvestDeviationTop10 = (year) => {
	cockpitApi.getInvestDeviationTop10({ year: year }).then((res) => {
		if (res.code === "200") {
			state.data = res.data;
		}
	});
};

/**
 * 搜索
 */
const onSearch = () => {
	getInvestDeviationTop10(props.year);
};

defineExpose({
	onSearch,
});

onMounted(() => {
	getInvestDeviationTop10(props.year);
});
</script>
<style lang="scss" scoped>
.fontStyle{
	color: #999999;
}

.box {
	padding: 10px 20px;
	width: 100%;
	height: 262px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 12px 0 rgba(0, 0, 0, 0.05);
	overflow-x: hidden;
	overflow-y: auto;
}

.empty {
	margin-top: -25px;
}

.item {
	font-size: 14px;
	text-align: center;
	width: 100%;
	height: 46px;
	line-height: 46px;
	border-bottom: 1px solid #ebeef5;
	color: #1a1a1a;
	.index {
		width: 5%;
	}
	.id {
		width: 45%;
	}
	.name {
		width: 40%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.zb {
		width: 10%;
		color: #fc7018;
	}
}
</style>
